<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div id="chart-container">
            <canvas id="myChart"></canvas>
        </div>
</body>
<script>
    // 请求本地后端接口/ThData/list的所有数据
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            // 根据id将数据进行排序
            data.sort(function (a, b)  {
                return a.id - b.id;
            });
            // 将数据放入到字典里面
            var chartData = {};
            for (var i = 0; i < data.length; i++) {
                chartData[data[i]["id"]] = data[i]["value"];
            }

            // 用Chart.js实现图表展示
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: Object.keys(chartData), //x轴上的标签
                    datasets: [{
                        label: '# of Votes',
                        data: Object.values(chartData), //y轴上的数据值
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        }
    }
    xhr.open('GET', '/ThData/list', true);
    xhr.send();
</script>
</html>